<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>博客详情页</title>
    <link rel="stylesheet" href="./css/List.css">
</head>
<body>
<div class="导航栏">
    <div class="导航栏左边">
        <div class="logo-shell">
            <img class="logo" src="./img/logo.jpg">
        </div>
        我的博客系统
    </div>
    <div class="导航栏右边">
        <a href="/List.html">主页</a>
        <a href="/edit.html">写博客</a>
        <a href="/login.html">注销</a>
    </div>
</div>
<div class="下面区域">
    <div class="用户信息展示">
        <div class="头像展示区">
            <img src="./img/avatar.jpg">
        </div>
        <div class="用户名称">小熊吃糖</div>
        <div class="git地址">
            <a href="https://gitee.com/ren-xiaoxiong">gitee 地址</a>
        </div>
        <div class="统计信息">
            <div class="文章数量区域">
                <div>文章</div>
                <div class="文章数量">2</div>
            </div>
            <div class="分类数量区域">
                <div>分类</div>
                <div class="分类数量">2</div>
            </div>
        </div>
    </div>
    <div class="博客列表展示">
        <div class="博客项">
            <h3 class="博客标题">我的第一篇博客</h3>
            <p class="发表日期">2022-08-09 09:31:28</p>
            <p class="简介信息">
            <p>
                      从今天起我要好好敲代码.Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias  ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Aut recusandae omnis natus ut! Autem alias  ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi. </p>
           <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste  corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere officiis iure velit.
               Blanditiis  pariatur delectus perferendis.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste  corrupti itaque,
               omnis alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis  pariatur delectus perferendis. </p>
        </div>
    </div>
</div>
</body>
</html>